import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	List,
	InputItem,
} from "weaver-mobile";
import VerificationCode from '../forgetPassword/VerificationCode';

@observer
export default class Form extends Component {
	constructor(props) {
		super(props);
	}

	render() {
		const {
			store
		} = this.props, {
			labels,
			keys,
			placeholders,
			values,
			handleFormChange,
			handleFormBlur,
			date,
		} = store;

		return (
			<div className='Form'>
				{
					labels.map( (label,index) => {
						const key=keys[index];
						const placeholder = placeholders[index];
						const value=values[index];

						return (
							<div key={key}>
								<div className='Form-label'>{`${label}:`}</div>
								<List>
									<InputItem
										clear
										value={value}
										type={(index !== (labels.length - 1)) ? 'password' : 'text'}
					        			placeholder={placeholder}
					        			onChange={value => handleFormChange(value,index)}
					        			onBlur={value => handleFormBlur(value,index)}
					      			/>
								</List>
							</div>
						)
					})
				}
				<div className='Form-verifyCode'>
					<VerificationCode date={date}/>
				</div>
			</div>
		)
	}

}